<template>
  <div class="usermanger">
      <div class="title">
          用户管理
      </div>
      <div class="user-item" v-for="(item) in userList" :key="item.id">
          <div class="user-name">
              {{item.userCode +"（" + getUserType(item.type) + "）"}}
          </div>
          <div class="line">
              <div class="name">用户名：</div>
              <div class="value">
                  <input type="text" placeholder="填写用户名" v-model="item.userName" maxlength="20">
              </div>
          </div>
          <div class="line">
              <div class="name">劫持报警：</div>
              <div class="flag">
                <div class="sw">
                  <!-- <i-switch v-model="switchFlag" size="small"></i-switch>                   -->
                  <x-switch v-model="item.hijackStatus" :title="''"></x-switch>
                </div>
              </div>
          </div>

      </div>
      <div class="button">
            <x-button mini type="primary" @click.native="updateUserNameAndHijackStatus">确定</x-button>
        </div>
  </div>
</template>
<script>
import { XSwitch, XButton } from "vux";
export default {
  data: function() {
    return {
      switchFlag: true,
      userList: [{}]
    };
  },
  components: {
    XSwitch,
    XButton
  },
  mounted: function() {
    this.getUserList();
  },
  updated: function() {
    console.log("sss");
  },
  methods: {
    getUserList: function() {
      this.$http.get("http://iot.malanco.com/lock2Users").then(response => {
        console.log("lock2Users:");
        console.log(response.data);
        if ((response.data.success = true)) {
          this.userList = response.data.data;
        }
      });
    },
    getUserType: function(type) {
      if (type == 0) {
        return "指纹";
      } else if (type == 1) {
        return "密码";
      } else if (type == 2) {
        return "卡";
      } else if (type == 3) {
        return "钥匙";
      } else if (type == 4) {
        return "遥控";
      }
      return type;
    },
    updateUserNameAndHijackStatus: function() {
      var dataList = [];
      var oldList = this.userList;
      for(var i = 0;i < oldList.length;i++){
        var obj = {};
        obj.id = oldList[i].id;
        obj.userName = oldList[i].userName;
        obj.hijackStatus = oldList[i].hijackStatus;
        dataList.push(obj);
      }
      this.$http({
        url: "http://iot.malanco.com/updateUserNameAndHijackStatus",
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        },
        data: JSON.stringify(dataList)
      })
        .then(response => {
          this.$vux.toast.show({
            text: "处理成功"
          });
        },response => {
          this.$vux.toast.show({
            text: "用户保存失败",
            type: "warn"
          });
        })
    }
  }
};
</script>
<style lang="less">
.usermanger {
  .title {
    font-size: 16px;
    text-align: center;
  }
  .user-item {
    .user-name {
      font-size: 12px;
      text-align: center;
      background-color: #e1f0f6;
    }
    .line {
      display: flex;
      align-items: center;
      padding: 5px 10px;
      .name {
        font-size: 14px;
        width: 75px;
      }
      .value {
        flex-grow: 1;
        border-bottom: 1px solid #e1f0f6;
        input {
          border: none;
          outline: none;
          width: 100px;
        }
      }
      .flag {
        // display: flex;
        // justify-content: flex-end;
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-bottom: 1px solid #e1f0f6;
        height: 22px;
        position: relative;
        .sw {
          position: absolute;
          right: -10px;
          top: -14px;
          transform: scale(0.6);
        }
      }
    }
  }
  .button {
    text-align: center;
    margin: 10px 0px;
  }
}
</style>
